<template>
    <div class="deptbgc">
        <el-header>
            <div class="depttitle">
                员工入职管理
            </div>
        </el-header>    
        <div class="btncl">
            <el-button class="deptbtn1" type="text" @click="dialogFormVisible=true">员工基本信息录入</el-button>
            <button class="deptbtn">员工部门，岗位录入</button>
            <button class="deptbtn">员工试用期的录入</button>
            <button class="deptbtn">员工其他信息的录入</button>
        </div>

        <div class="tableborder">
        <el-table :data="gridData" class="tablestyle" :header-cell-style="{background:'#000',color:'gold'}" :row-style="{background:'rgba(0,0,0,0.1)',color:'gold'}">
                <el-table-column property="icno" label="员工号" ></el-table-column>
                <el-table-column property="icna" label="姓名" ></el-table-column>
                <el-table-column property="icsex" label="性别" ></el-table-column>
                <el-table-column property="icbir" label="出生日期" ></el-table-column>
                <el-table-column property="icid" label="身份证号" ></el-table-column>
                <el-table-column property="icdp" label="部门" ></el-table-column>
                <el-table-column property="icst" label="岗位" ></el-table-column>
                <el-table-column property="icic" label="入职日期" ></el-table-column>
                <el-table-column property="icwork" label="参加工作日期" ></el-table-column>
                <el-table-column property="icform" label="用工形式" ></el-table-column>
                <el-table-column property="icfrom" label="人员来源" ></el-table-column>
                <el-table-column property="icpolicy" label="政治面貌" ></el-table-column>
        </el-table>
        </div>

            <el-dialog title="员工基本信息录入" :visible.sync="dialogFormVisible"  :append-to-body='true'>
                <el-form :model="form">
                    <el-form-item label="员工号" :label-width="formLabelWidth">
                        <el-input v-model="form.icno" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.icna" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-select v-model="form.icsex" placeholder="请选择性别">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出生日期" :label-width="formLabelWidth">
                        <el-input v-model="form.icbir" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" :label-width="formLabelWidth">
                        <el-input v-model="form.icid" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="部门" :label-width="formLabelWidth">
                        <el-input v-model="form.icdp" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="岗位" :label-width="formLabelWidth">
                        <el-input v-model="form.icst" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="入职日期" :label-width="formLabelWidth">
                        <el-input v-model="form.icic" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="参加工作日期" :label-width="formLabelWidth">
                        <el-input v-model="form.icwork" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用工形式" :label-width="formLabelWidth">
                        <el-select v-model="form.icform" placeholder="请选择用工形式">
                            <el-option label="正式员工" value="1"></el-option>
                            <el-option label="临时员工" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="人员来源" :label-width="formLabelWidth">
                        <el-select v-model="form.icfrom" placeholder="请选择人员来源">
                            <el-option label="正式员工" value="1"></el-option>
                            <el-option label="临时员工" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="政治面貌" :label-width="formLabelWidth">
                        <el-select v-model="form.icpolicy" placeholder="请选择政治面貌">
                            <el-option label="党员" value="1"></el-option>
                            <el-option label="预备党员" value="2"></el-option>
                            <el-option label="团员" value="3"></el-option>
                            <el-option label="其他" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
    </div>


</template>

<script>
     export default {
    data() {
      return {
        gridData: [{
          stno: '201901',
          stna: '财政岗位',
          stty: '营销'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          icno: '',
          icna: '',
          icsex: '',
          delivery: false
        },
        formLabelWidth: '120px'
      };
    }
  };
</script>

<style scoped>
.deptbgc{
    background: url("../assets/5.jpg");
    width: 100%;
    height: 100%;
    position: fixed;
    margin: -8px;
}

.depttitle{
    font-size: 60px;
    text-align: center;
    color: rgb(216, 185, 7);
    width: 100%;
    height: 80px;
}

.btncl{
    width: 100%;
    height: 132px;
}

.deptbtn1{
    color: gold;
    background-color: #000;
    margin-top: 46px;
    margin-left: 415px;
    font-size: 30px;
    float: left;
    border: 0px;
    cursor: pointer;
}

.deptbtn{
    color: gold;
    background-color: #000;
    margin-top: 50px;
    margin-left: 30px;
    font-size: 30px;
    float: left;
    border: 0px;
    cursor: pointer;
}

.tablestyle{
    background-color: rgba(0,0,0,0.1);
    margin-left: 300px;
    margin-top: 35px;
    width: 1350px;
    height: 600px;
}

.tableborder >>> .el-table__row>td{
  /* 去除表格线 */
  border: none;
}

/* .tableborder >>> .el-table th.is-leaf{
    去除上边框
    border: none;
} */

.el-table::before{
    /* 去除下边框 */
    height: 0px;
}

</style>
